<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="姚德秋">
    <title></title>
    <style>
        *{
            box-sizing: border-box;
        }
    body{
        height: 100vh;
        margin: 0;
    }
    /* 遮罩层的宽高100% */
    #overlay{
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        position: absolute;
        top: 0;
        left: 0;
        display: none;
    }
    .box{
        width: 400px;
        height: 200px;
        border: 2px solid rebeccapurple;
        position: absolute;
        top: calc(50% - 100px);
        left: calc( 50% - 200px);
        background-color: lightcoral;
        display: none;
    }
    .close{
        cursor: pointer;
    }
    </style>
</head>
<body>
  <div class="btn"><button onclick="showclick()">弹出框</button></div>
  <div id="overlay"></div>
  <div class="box"><span class="close" onclick="closeclick()">&times;</span></div>
</body>
</html>
<script>
    var overlay = document.querySelector('#overlay');
    var box = document.querySelector('.box');
    // 展示
    function showclick(){
       overlay.style.display = 'block';
       box.style.display = 'block';
    }
    // 隐藏
    function closeclick(){
        overlay.style.display = 'none';
        box.style.display = 'none';
    }

</script>